// 统计数据并渲染
document.addEventListener('DOMContentLoaded',async function(){

      // 获取统计数据并渲染 
    const res = await axios({
        url:'/dashboard',
        method:'GET',
        // 数据不是任何人都可以访问 所以要在请求头携带token
        // 在请求拦截器中配置了
        // headers:{
        //     authorization:localStorage.getItem('user-token')
        // }
    })
    console.log('服务器响应回来的数据',res);
    // console.log('概览数据',res.data.overview);
    // 解构
    const {overview} = res.data
    console.log('概览数据',overview);
    // 展示数据
    // 把数据放到span中
    // 思路1 先获取标签 给其设置innerhtml
    // document.querySelector('[name=salary]').innerHTML = overview.salary
    // 思路2 对数据（对象）进行便利 然后获取标签 设置innerhtml
    // 提前设计 标签的name和对象的属性名一致
    for(let k in overview){
        // k--属性名  overview『k』---属性值
        document.querySelector(`[name=${k}]`).innerHTML = overview[k]
    }
    initSalary(res.data.year)
    initGender(res.data.salaryData) 
    
    initPie(res.data.salaryData)
    initGroup(res.data.groupData)
 

})


// 封装一个函数 渲染薪资走势图表代码 然后再页面加载函数中调用薪资走势图表函数
function initSalary(year){
    console.log('全年薪资数据',year);
    // 1. 创建ec实例
    const box = document.querySelector('#line')
    const myChart = echarts.init(box)
    // 2. 准备配置项和数据
    option = {
        title:{
          text:"2021全学科薪资走势",
          textStyle:{
            fontSize:16,
            fontWeight:700
          },
          left:10,
          top:15,
        },
        xAxis: {
          axisLine:{
            lineStyle:{
              color:"#ccc",
              type:"dashed",
            }
          },
          axisTick:{
            lineStyle:{
              color:"black",
              width:2,
            }
          },
          axisLabel:{
              color:"#666",
          },
          type: 'category',
          // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
          data:year.map(item=>item.month),

        },
        yAxis: {
          type: 'value',
          splitLine:{
            lineStyle:{
              color:"#ccc",
            type:"dashed"
            }
          },splitNumber:5
        },
        grid:{
          left:"10%",
          top:"20%"
        },
        tooltip:{
          trigger:"axis"
        },
        color:{
          type:"linear",
          x:0,
          y:0,
          x2:1,
          y2:0
        },
        colorStops:[
          {
            offset:0,
            color:"4a9dee"
          },
          {
            offset:1,
            color:"#5b79f0"
          }
        ],
        global:false,
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data:year.map(item=>item.salary),

            type: 'line',
            smooth: true,
            symbolSize:10,
            symbol:"emptyCircle",
            symbolSize:10,
            lineStyle:{
              width:5
            },
            areaStyle:{
              color:{
                type:"linear",
                x:0,
                y:0,
                x2:1,
                y2:0,
                colorStop:[
                  {
                  offset:0,
                  color:'#4A9DEE'
                },
                {
                  offset:0.5,
                  color:'#5B79FO'
                },
                {
                  offset:1,
                  color:'#5B79FO'
                }
                ],
                global:false
                
              },
            },
          }
        ]
      };
    // 3. 设置配置项 生成图表
    myChart.setOption(option)

}

// 封装一个函数  渲染班级薪资分数图表
function initPie(salaryData){
  console.log(salaryData);
  // 1.创建ec实例
  // 2. 准备配置项和数据
  // 3. 设置配置项生成图表
  const box = document.querySelector('#salary')
  const myChart = echarts.init(box)
  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
        data:salaryData.map(item=>{
          return {value:item.g_count+item.b_count,name:item.label}
        })
      }
    ]
  };
  myChart.setOption(option)
}

// 封装一个函数 渲染小组成员薪资
function initGroup(groupData){
  console.log(groupData);
  const box = document.querySelector('#lines')
  const myChart = echarts.init(box)
  option = {
    xAxis: {
      type: 'category',
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      data:groupData[1].map(item=>item.name)
    },
    yAxis: {
      type: 'value'
    },
    color:[{
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 1, color: '#39d39c' // 0% 处的颜色
    }, {
        offset: 0, color: '#39d39c' // 100% 处的颜色
    }],
    global: false // 缺省为 false
  },{
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'blue' // 0% 处的颜色
    }, {
        offset: 1, color: 'skyblue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
  }],
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data:groupData[1].map(item=>item.hope_salary),
        type: 'bar'
      },
          {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data:groupData[1].map(item=>item.salary),
        type: 'bar'
      }
    ]
  }; myChart.setOption(option)
  /// -------------------------------------------------------------------
// 单击小组序号 切换图表
// 1. 给小组号注册点击事件
// 2. 获取当前小组饿数据
// 3. 更改配置项数据
// 4. 重新生成图表
 const btns = document.querySelector('#btns')
 btns.addEventListener('click',function(e){
  if(e.target.tagName === 'BUTTON'){
    // console.log(ok);
    //获取组号
    const n = e.target.innerHTML 
    // console.log(n);
    console.log(groupData[n]);
    option.xAxis.data = groupData[n].map(item=>item.name)
    option.series[0].data = groupData[n].map(item=>item.hope_salary)
    option.series[1].data = groupData[n].map(item=>item.salary)
    myChart.setOption(option)
   
    // 按钮高亮 排他思想
    btns.querySelector('.btn-blue').classList.remove('btn-blue')
    e.target.classList.add('btn-blue')
  }
 }) 
}


// 封装一个函数 渲染男女薪资分布
function initGender(salaryData){
    console.log('男女薪资数据',salaryData);
    // 1. 创建ec实例
    const box = document.querySelector('#gender')
    const myChart = echarts.init(box)
    option = {
      title: {
        text: '男女薪资分布',
        subtext: 'man & woman',
        left: '10',
        top:"15"
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '男生薪资',
          type: 'pie',
          radius: ['20%','30%'],
          center:['50%','30%'],
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
          ],
          // data: salaryData.map(item=>{
          //   return {value:'item.b_count',name:'item.label'}
          // }),
        },
         {
          name: '女生薪资',
          type: 'pie',
          radius: ['20%','30%'],
          center:['50%','80%'],
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
          ],
          // data: salaryData.map(item=>{
          //   return {value:'item.g_count',name:'item.label'}
          // }),
        }
      ]
    };
    myChart.setOption(option)
}
